@charset "utf-8";

//rest------------------------------------------------------------------------------------------------
* {
  margin: 0;
  padding: 0;
  font-family:"microsoft yahei";
}
li{ list-style: none;}
a{text-decoration: none;}
img{
    border: none;
}

audio{display: none;}



//public------------------------------------------------------------------------------------------------
 body{
    background: #01150e url('http://oss.meng.wop100.cn/vv/img/bac.jpg') no-repeat center top;
    background-size: cover;
    font-size: 12px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-width: 3.2rem;
    max-width: 7.5rem;
    margin: 0 auto;
    overflow: hidden;
}

img{
    display: block;
    width: 100%;
}

.box{//每个大容器通用
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    min-width: 3.2rem;
    max-width: 7.5rem;
    overflow: hidden;
}


.el(@width,@top:auto,@left:auto,@right:auto){//简化CSS  width top left right
    position: absolute;
    width: @width;
    top: @top;
    left: @left;   
    right: @right; 
}


//step1  首页------------------------------------------------------------------------------------------------
.step1{
    .box;
    
    .logo{
        .el(1.85rem,0.25rem,0.25rem,auto);
    }
    
    .title{
        .el(2.43rem,2.3rem,(7.5-2.43)/2rem,auto);
    }
    
    .ray1{
        .el(2.01rem,2rem,3.2rem,auto);
    }
    
    .ray2{
        .el(2.05rem,4rem,0.4rem,auto);
    }
    
    .start1{
        .el(2.71rem,5.9rem,(7.5-2.71)/2rem,auto);
        animation: start1 2s linear 0s infinite normal ;
        -webkit-animation: start1 2s linear 0s infinite normal ;
        transform-origin: 1.36rem 1.46rem;
    }
   
    @keyframes start1{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
    @-webkit-keyframes start1{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
       
    .start{
        .el(1.19rem,6.74rem,(7.5-1.19)/2rem,auto);
        
    }
}

//step2
//step3
//step4
//step5
//step6
//step7
//step8


/******旋转提示******/
#orientLayer {
    display: none;
}

@media all and (orientation : portrait) {
    #orientLayer {
        display: block;
    }
}

.mod-orient-layer {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 9997
}

.mod-orient-layer__content {
    position: absolute;
    width: 100%;
    top: 45%;
    margin-top: -75px;
    text-align: center
}

.mod-orient-layer__icon-orient {
    background-image: url('');
    display: inline-block;
    width: 67px;
    height: 109px;

    -webkit-animation: rotation infinite 1.5s ease-in-out;
    animation: rotation infinite 1.5s ease-in-out;
    -webkit-background-size: 67px;
    background-size: 67px
}

.mod-orient-layer__desc {
    margin-top: 20px;
    font-size: 15px;
    color: #fff
}